<template>
    <div class="mine">
        <div class="mine-list" style="border-bottom: 8px solid #f2f2f2">
            <div>头像</div>
            <div class="mine-list-right">
                <!--                <img class="head-pic" :src="user.avatarUrl">-->
                <cube-upload
                        ref="upload"
                        :value="files"
                        :action="action"
                        @files-added="addedHandler"
                        @file-error="errHandler">
                    <div class="clear-fix">
                        <cube-upload-file v-for="(file, i) in files" :file="file" :key="i"></cube-upload-file>
                        <cube-upload-btn :multiple="false">
                            <!--                            <div>-->
                            <!--                                <i>＋</i>-->
                            <!--                                <p>Please click to upload ID card</p>-->
                            <!--                            </div>-->
                        </cube-upload-btn>
                    </div>
                </cube-upload>
                <img class="mine-list-icon" src="../image/icon-right.png">
            </div>
        </div>
        <div class="mine-list" >
            <div>姓名</div>
            <div class="mine-list-right">
                <div class="mine-list-title">{{user.real_name}}</div>
                                <div style="width: 20px;height: 20px"></div>

                <!--                <img class="mine-list-icon" src="../image/icon-right.png">-->
            </div>
        </div>
        <div class="mine-list" @click="updateNickName">
            <div>昵称</div>
            <div class="mine-list-right">
                <div class="mine-list-title">{{user.nickName}}</div>
                <img class="mine-list-icon" src="../image/icon-right.png">
            </div>
        </div>
        <div class="mine-list" @click="showSexPicker">
            <div>性别</div>
            <div class="mine-list-right">
                <div class="mine-list-title">{{user.gender==0?'未知':user.gender==1?'男':'女'}}</div>
                <img class="mine-list-icon" src="../image/icon-right.png">
            </div>
        </div>
        <div class="mine-list" @click="showDatePicker">
            <div>生日</div>
            <div class="mine-list-right">
                <div class="mine-list-title">{{user.birthday?user.birthday:'未知'}}</div>
                <img class="mine-list-icon" src="../image/icon-right.png">
            </div>
        </div>
        <div class="mine-list" @click="showDatePicker">
            <div>年龄</div>
            <div class="mine-list-right">
                <div class="mine-list-title">{{age||age===0?age:'未知'}}</div>
                <img class="mine-list-icon" src="../image/icon-right.png">
            </div>
        </div>
        <div class="mine-list" @click="updateTelShow">
            <div>手机号</div>
            <div class="mine-list-right">
                <div class="mine-list-title">{{user.phone}}</div>
<!--                <div style="width: 20px;height: 20px"></div>-->
                <!--                <div style="width: 20px;height: 20px"></div>-->
                                <img class="mine-list-icon" src="../image/icon-right.png">
            </div>
        </div>
        <div class="mine-list">
            <div>身份证号</div>
            <div class="mine-list-right">
                <div class="mine-list-title">{{user.id_number}}</div>
                <div style="width: 20px;height: 20px"></div>
                <!--                <img class="mine-list-icon" src="../image/icon-right.png">-->
            </div>
        </div>
        <div class="mine-list" @click="updateBankCard">
            <div>银行卡号</div>
            <div class="mine-list-right">
                <div class="mine-list-title">{{user.bank_card}}</div>
                <img class="mine-list-icon" src="../image/icon-right.png">
            </div>
        </div>


        <div class="mine-exit" @click="exit">退出登录</div>


        <div v-if="telShow" class="mask"></div>
        <div v-if="telShow" class="update-tel">
            <div class="tel-title">修改手机号</div>
            <div class="login-list">
                <div class="login-title">手机号</div>
                <input class="login-input" type="number" v-model="tel" placeholder="请输入新手机号码">
            </div>
            <div class="login-list">
                <div class="login-title">验证码</div>
                <input class="login-input" style="width: 35vw" type="number" v-model="code" placeholder="请输入验证码" >
                <div class="login-code" @click="sendSms">{{codeTitle=='获取'?codeTitle:codeTitle+'s'}}</div>
            </div>
            <div class="btn-group">
                <div class="btn-cancel" @click="updateTelShow">取消</div>
                <div class="btn-sumbit" @click="updateTel">确认</div>
            </div>
        </div>


    </div>
</template>
<script lang="ts">
    // @ is an alias to /src
    import {Component} from "vue-property-decorator";
    import Sence from "../sence/Sence";

    @Component({
        components: {},
    })

    export default class Mine extends Sence {
        public tel: any = ""; // 电话
        public code: any = ""; // 验证码
        public codeTitle: any = "获取"; // 获取验证码文字内容
        public telShow:boolean=false; // 修改手机号显示隐藏
        public user: any = ""; // 用户信息
        public files: any = []; // 图片
        public age: any = ""; // 年龄
        public sexArr: any = [{text: "男", value: 1}, {text: "女", value: 2}]; // 性别数组
        public action: any = {
            target: this.apiurl + "index.php?s=/api/upload/image",
            fileName: "iFile",
            data: {
                token: localStorage.getItem("token"),
                wxapp_id: 10001
            },
            checkSuccess: this.uploadSuccess
        }; // 图片action
        public mounted(): void {

            this.updateUser();

        }

        /**
         * 获取用户信息
         */
        public updateUser(): void {
            this.freshUser().then((res: any) => {
                this.user = res;
                this.files = [{response: {data: {file_path: res.avatarUrl}}, url: res.avatarUrl}];
                if (res.birthday) {
                    this.jsGetAge(res.birthday);
                }
            });
        }

        /**
         * 退出登录
         */
        public exit(): void {
            this.post('api/wechat/unbind',{type:'wechat'}).then((res:any)=>{
                localStorage.removeItem("token");
                localStorage.removeItem("third_id");
                location.href=this.apiurl+'dist/#'
            });
        }

        /**
         * 图片上传成功回调
         */
        public uploadSuccess(res: any) {
            this.post("api/user/saveBaseInfo", {avatarUrl: this.files[0].response.data.file_path}).then((res: any) => {
            });
            return true;
        }

        /**
         *  上传图片前事件
         */
        public addedHandler(): void {
            const file = this.files[0];
            file && (<any> this).$refs.upload.removeFile(file);
        }

        /**
         * 上传图片失败事件
         */
        public errHandler(): void {
            (<any> this).$createToast({
                type: "warn",
                txt: "Upload fail",
                time: 1000
            }).show();
        }

        /**
         * 修改姓名
         */
        public updateRealName(): void {
            (<any> this).$createDialog({
                type: "prompt",
                title: "修改姓名",
                prompt: {
                    value: this.user.real_name,
                    placeholder: "请输入真实姓名"
                },
                onConfirm: (e: any, promptValue: any) => {
                    this.post("api/user/saveBaseInfo", {real_name: promptValue}).then((res: any) => {
                        this.toast("修改成功！");
                        this.updateUser();
                    });
                }
            }).show();
        }

        /**
         * 修改昵称
         */
        public updateNickName(): void {
            (<any> this).$createDialog({
                type: "prompt",
                title: "修改昵称",
                prompt: {
                    value: this.user.nickName,
                    placeholder: "请输入用户昵称"
                },
                onConfirm: (e: any, promptValue: any) => {
                    this.post("api/user/saveBaseInfo", {nickName: promptValue}).then((res: any) => {
                        this.toast("修改成功！");
                        this.updateUser();
                    });
                }
            }).show();
        }

        /**
         * 修改手机号显示
         */
        public updateTelShow():void{
            if(this.telShow){
                this.telShow=false;
            }else {
                this.telShow=true;
            }
        }



        /**
         * 修改手机号
         */
        public updateTel():void{
           this.post('api/user/phoneModify',{
               phone:this.tel,
               identifyCode:this.code
           }).then((res:any)=>{
               this.toast("修改成功！");
               this.telShow=false;
               this.updateUser();
           })
        }

        /**
         * 获取手机验证码
         */
        public sendSms(): void {
            if (this.codeTitle == "获取") {
                this.post("api/identify/send", {
                    phone: this.tel,
                }).then((res: any) => {
                    this.codeTitle = 59;
                    let time = setInterval(() => {
                        this.codeTitle -= 1;
                        if (this.codeTitle == 0) {
                            clearInterval(time);
                            this.codeTitle = "获取";
                        }
                    }, 1000);

                });
            }
        }

        /**
         * 修改银行卡号
         */
        public updateBankCard(): void {
            (<any> this).$createDialog({
                type: "prompt",
                title: "修改银行卡",
                prompt: {
                    value: this.user.bank_card,
                    placeholder: "请输入银行卡号"
                },
                onConfirm: (e: any, promptValue: any) => {
                    this.post("api/user/saveBaseInfo", {bank_card: promptValue}).then((res: any) => {
                        this.toast("修改成功！");
                        this.updateUser();
                    });
                }
            }).show();
        }


        /**
         * 修改性别
         */
        showSexPicker() {
            (<any> this).$createPicker({
                title: "性别选择",
                data: [this.sexArr],
                onSelect: this.selectSexHandle,
                onCancel: this.cancelSexHandle
            }).show();

        }

        selectSexHandle(selectedVal: any, selectedIndex: any, selectedText: any) {
            this.post("api/user/saveBaseInfo", {gender: selectedVal[0]}).then((res: any) => {
                this.toast("修改成功！");
                this.updateUser();
            });
        }

        cancelSexHandle() {
        }

        /**
         * 修改生日
         */
        showDatePicker() {
            (<any> this).$createDatePicker({
                title: "生日",
                min: new Date(1900, 1, 1),
                max: new Date(),
                value: new Date(),
                onSelect: this.selectHandle,
                onCancel: this.cancelHandle
            }).show();
        }

        selectHandle(date: any, selectedVal: any, selectedText: any) {
            this.post("api/user/saveBaseInfo", {birthday: selectedVal.join("-")}).then((res: any) => {
                this.toast("修改成功！");
                this.updateUser();
            });
        }

        cancelHandle() {
        }

        /**
         *  年龄计算
         */
        public jsGetAge(strBirthday: any) {
            let returnAge;
            let strBirthdayArr = strBirthday.split("-");
            let birthYear = strBirthdayArr[0];
            let birthMonth = strBirthdayArr[1];
            let birthDay = strBirthdayArr[2];

            let d = new Date();
            let nowYear = d.getFullYear();
            let nowMonth = d.getMonth() + 1;
            let nowDay = d.getDate();

            if (nowYear == birthYear) {
                returnAge = 0;//同年 则为0岁
            } else {
                let ageDiff = nowYear - birthYear; //年之差
                if (ageDiff > 0) {
                    if (nowMonth == birthMonth) {
                        let dayDiff = nowDay - birthDay;//日之差
                        if (dayDiff < 0) {
                            returnAge = ageDiff - 1;
                        } else {
                            returnAge = ageDiff;
                        }
                    } else {
                        let monthDiff = nowMonth - birthMonth;//月之差
                        if (monthDiff < 0) {
                            returnAge = ageDiff - 1;
                        } else {
                            returnAge = ageDiff;
                        }
                    }
                } else {
                    returnAge = -1;//返回-1 表示出生日期输入错误 晚于今天
                }
            }
            this.age = returnAge;//返回周岁年龄
        }

    }


</script>

<style scoped lang="stylus">
    input {
        outline: none;
        border: 0;
        padding 5px 0;
    }

    .mine-list
        display flex
        flex-direction row
        justify-content space-between
        border-bottom 1px solid #f2f2f2
        align-items center
        padding 10px


    .mine-list-right
        display flex
        flex-direction row
        align-items center


    .head-pic
        width 30px
        height 30px
        border-radius 30px

    .mine-list-icon
        width 20px
        height 20px

    .mine-list-title
        color #808080

    .mine-exit
        border-top 7px solid #f2f2f2
        border-bottom 8px solid #f2f2f2
        text-align center
        padding 15px


    >>> .cube-upload
    >>> .cube-upload-file, .cube-upload-btn
        margin: 0
        width 40px
        height: 40px

    >>> .cube-upload-file
        margin: 0

        + .cube-upload-btn
            margin-top: -40px
            opacity: 0

    >>> .cube-upload-file-def
        width: 100%
        height: 100%

        .cubeic-wrong
            display: none


    >>> .cubeic-right::before,
    >>> .cubeic-right::after {
        display none
    }

    >>> .cube-upload-file-state {
        background-color: transparent
    }

    >>> .cube-upload-file-progress {
        display none
    }

    .login-list
        display flex
        align-items center
        border-bottom 1px solid #eee
        padding 8px 0

        .login-code
            margin-left 1vw
            width calc(25vw - 20px)
            background #007aff
            text-align center
            color white
            height 28px
            line-height 28px
            border-radius 3px
            font-size 13px


        .login-title
            flex-shrink 0
            font-size 14px
            font-weight bold
            width 22vw

        .login-input
            width calc(57vw - 20px)
            font-size 14px

    .mask
       position fixed
       top 0
       bottom 0
       left 0
       right 0
       margin auto
       width 100vw
       height 100vh
       background black
       opacity 0.2

    .update-tel
       position fixed
       margin auto
       top 0
       left 0
       right 0
       bottom 0
       width 80vw
       padding 18px
       box-shadow 0 0 10px #ccc
       background white
       height fit-content
       border-radius 5px

    .tel-title
       font-size 16px
       text-align center
       font-weight bold
       border-bottom 1px solid #f2f2f2
       padding-bottom 15px

    .btn-group
       margin-top 18px
       display flex
       flex-direction row
       justify-content space-between

    .btn-cancel
       width 38vw;
       height 35px;
       line-height 35px;
       text-align center;
       background #f2f2f2;
       border-radius 5px;

    .btn-sumbit
        width 38vw;
        height 35px;
        line-height 35px;
        text-align center;
        background #007aff;
        color white;
        border-radius 5px;






</style>
